<template>
  <div class="Volume">
    <div class="Volume-title">
      <span>商城各分类商品销量</span>
      <div class="volume-right">
        <div class="numthree">
          <el-checkbox v-model="checked">单量</el-checkbox>
          <!-- <el-radio-group v-model="radio3">
            <el-radio :label="5">同比</el-radio>
            <el-radio :label="10">环比</el-radio>
          </el-radio-group> -->
        </div>
        <div class="twostring">
          <!-- <el-cascader
            :options="vallis"
            :show-all-levels="false"
            size="mini"
            @change="threegenre()"
          ></el-cascader> -->
          <!-- <el-cascader :options="vallns" :show-all-levels="false" size="mini"></el-cascader> -->
        </div>
      </div>
    </div>
    <div class="Volume-echarts">
      <div id="volumeone" :style="{width:'1200px',height:'400px'}"></div>
    </div>
  </div>
</template>
<script>
import Echarts from "vue-echarts";
export default {
  name: "Volume",
  data() {
    return {
      radio3: "5",
      messag: "",
      checked: true,
      vallns: [
        {
          value: "senvendays",
          label: "近七天"
        },
        {
          value: "month",
          label: "一个月"
        },
        {
          value: "threemonth",
          label: "90天"
        }
      ],
      vallis: [
        {
          value: "onestring",
          label: "一级分类"
        }
      ],
      gcId: 1,
      yearOnYear: true,
      chainRatio: true,
      timeType: 1,
      page: 1,
      limit: 30,
      keyword: "",
      stackname: "",
      stacktime: "",
      stackitem: "",
      classId: "",
      series6: [
        {
          name: "时时获取",
          type: "bar",
          // barWidth: "30%",
          barGap: '20',
          data: []
        }
      ]
    };
  },

  created() {
    this.initshijian();
    this.volumeone();
  },
  mounted() {},
  updated() {
    this.volumeone();
  },
  methods: {
    initshijian() {
      var _that = this;
      this.$http({
        url: this.$http.adornUrl("/goods/class/queryGoodsClassList"),
        method: "get",
        params: this.$http.adornParams({
          page: 1,
          limit: 30,
          keyword: ""
        })
      })
        .then(({ data }) => {

          var stackname = []; //底部头部名称
          var stacktime = []; //相对应的value值
          var stackitem = []; //柱状图的item数据

          data.data.list.map(item => {
            stackname.push(item.className);
          });

          data.data.list.map(item => {
            stacktime.push(item.classId);
          });

          var big = []; //classId
          var type1 = [];
          data.data.list.map((item, index) => {
            type1.push(item.classId);
          });

          big[0] = type1[0];
          big[1] = type1[1];
          big[2] = type1[2];
          big[3] = type1[3];
          big[4] = type1[4];
          big[5] = type1[5];
          big[6] = type1[6];
          big[7] = type1[7];
          big[8] = type1[8];
          big[9] = type1[9];
          big[10] = type1[10];
          // this.series6 = big;
          this.series6 = [
            {
              name: "时时获取",
              type: "bar",
              barWidth: "30",
          barGap: '20',
              data: []
            }
          ];
          this.series6[0].data = big;

          if (data && data.code === 0) {
            this.volumeone.setOption({
              // grid: {
              //   x:'20%'
              // },
              xAxis: [
                {
                  type: "category",
                  data: stackname,
                  axisTick: {
                    show:false
                  }
                
                }
              ],
              yAxis: [
                {
                  type: "value"
                }
              ],
              series: this.series6
            });
          }
        })
        // .catch(err => {
        //   console.log(err, "商品分类77777");
        // });
    },
    volumeone() {
      this.series6[0].data = [];
      this.$nextTick(() => {
        this.volumeone = this.$echarts.init(
          document.getElementById("volumeone")
        );
        //绘制图表
        this.volumeone.setOption({
          color: ["#3398DB"],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            }
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },
          xAxis: [
            {
              type: "category",
              data: [],
              boundaryGap:true,
              axisTick: {
                alignWithLabel: false
              }
            }
          ],
          yAxis: [
            {
              type: "value"
            }
          ],
          series: this.series6
        });
      });
    }
  }
};
</script>
<style scoped>
.Volume {
  width: 100%;
  height: 450px;
  margin-top: 461px;
  padding-top: 20px;
}
.Volume-title {
  height: 32px;
  width: 100%;
  line-height: 32px;
  padding-left: 117px;
}
.Volume-title > span {
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  float: left;
}
.Volume-echarts {
  width: 100%;
  height: 390px;
}
.volume-right {
  width: 600px;
  height: 32px;
  float: right;
}
.numthree {
  width: 280px;
  height: 32px;
  float: left;
}
.twostring {
  float: right;
  padding-right: 20px;
}
</style>